<template>
  <!-- 新增部门的弹层 -->
  <el-dialog title="分配权限" :visible.sync="showDialog" @closed="btnCancel()">
    <el-tree
      v-if="showDialog"
      ref="tree"
      :data="tableData"
      show-checkbox
      node-key="id"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="arr"
      :props="defaultProps"
      default-expand-all
    />
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-button @click="showDialog = false">取消</el-button></el-col>
      <el-col :span="6">
        <el-button type="primary" @click="changeper()">确定</el-button></el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { permissAllAPI, changePermidsAPI } from '@/api'
import { tranListToTreeData } from '@/utils/index'
export default {
  data() {
    return {
      id: '',
      showDialog: false,
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      arr: []
    }
  },
  async created() {
    const res = await permissAllAPI()
    // this.tableData = res

    this.tableData = tranListToTreeData(res, '0')
  },
  methods: {
    btnCancel() {
      this.arr = []
    },

    async changeper() {
      const a = this.$refs.tree.getCheckedKeys()
      console.log(a === this.arr)
      await changePermidsAPI({
        id: this.id,
        permIds: a
      })
      this.$message.success('分配成功')
      this.showDialog = false
    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog__header {
  height: 59px;
  background-color: rgb(134, 33, 33);
}
</style>
